<template>
    <div class="login-wrapper">
        <div class="background" ref="JPdom"></div>

        <div v-if="!notFound" class="login-box">
            <div class="form-container">
                <h2 class="form-title">
                    {{ name === '登录' ? '账户登录' : name === '忘记密码' ? '忘记密码' : '注册账号' }}
                </h2>

                <form @submit.prevent>
                    <!-- 登录 -->
                    <div v-if="name === '登录'">
                        <div class="input-group">
                            <input autocomplete="on" v-model="form.phonenum" type="text" placeholder="账号/手机号" />
                        </div>
                        <div class="input-group">
                            <input autocomplete="on" e v-model="form.password" type="password" placeholder="密码" />
                        </div>
                        <div class="button-group">
                            <button type="button" class="btn-primary" @click="login">登录</button>
                            <button type="button" class="btn-text btn-register" @click="name = '注册'">注册账号</button>
                            <div class="btn-text-group">
                                <button type="button" class="btn-text" @click="name = '忘记密码'">忘记密码？</button>
                            </div>
                        </div>
                    </div>

                    <!-- 忘记密码 -->
                    <div v-else-if="name === '忘记密码'">
                        <div class="input-group">
                            <input autocomplete="on" e v-model="forget.phonenum" type="text" placeholder="请输入手机号" />
                        </div>
                        <div class="input-group captcha-group">
                            <input autocomplete="on" v-model="forget.yzm" type="text" placeholder="验证码" />
                            <button type="button" class="btn-captcha" @click="clickForgetCode"
                                :disabled="forgetTime !== 60">
                                {{ forgetTime === 60 ? '获取验证码' : forgetTime + 's' }}
                            </button>
                        </div>
                        <div class="input-group">
                            <input autocomplete="on" e v-model="forget.password" type="password" placeholder="新密码" />
                        </div>
                        <div class="button-group">
                            <button type="button" class="btn-primary" @click="forgetpassword">修改密码</button>
                            <button type="button" class="btn-text" @click="name = '登录'">返回登录</button>
                        </div>
                    </div>

                    <!-- 注册 -->
                    <div v-else>
                        <div class="input-group">
                            <input autocomplete="on" v-model="register.name" type="text" placeholder="用户名" />
                        </div>
                        <div class="input-group">
                            <input autocomplete="on" e v-model="register.phonenum" type="text" placeholder="请输入手机号" />
                        </div>
                        <div class="input-group captcha-group">
                            <input autocomplete="on" v-model="register.yzm" type="text" placeholder="验证码" />
                            <button type="button" class="btn-captcha" @click="clickRegisterCode"
                                :disabled="registerTime !== 60">
                                {{ registerTime === 60 ? '获取验证码' : registerTime + 's' }}
                            </button>
                        </div>
                        <div class="input-group">
                            <input autocomplete="on" e v-model="register.password" type="password" placeholder="密码" />
                        </div>
                        <div class="button-group">
                            <button type="button" class="btn-primary" @click="registersubmit">注册</button>
                            <button type="button" class="btn-text" @click="name = '登录'">返回登录</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div v-else class="not-found">
            团队不存在
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import JParticles, { Particle } from 'jparticles';
import { onMounted, onUnmounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { asyncgetregistphoneVerificationCode, asynclogin, asyncresetpassword, asyncuserregist } from "../../api/index";
import { Storekey } from "../../interface";
import { isPhonenum } from "../../util/RegExp";

const store = useStore(Storekey)
const router = useRouter()

const name = ref<'登录' | '忘记密码' | '注册'>('登录')

const notFound = ref(false)
const JPdom = ref()
const jpdata = ref<Particle>()

const form = reactive({
    phonenum: "",
    password: "",
    teamid: ""
})

const forget = reactive({
    phonenum: "",
    password: "",
    yzm: ""
})

const register = reactive({
    phonenum: "",
    password: "",
    yzm: "",
    name: ""
})

// 倒计时
const forgetTime = ref(60)
const registerTime = ref(60)

// 登录
async function login() {
    const { phonenum, password } = form
    if (!phonenum || !password) {
        ElMessage.error('请输入账号和密码')
        return
    }
    try {
        await asynclogin({ ID: phonenum, password })
        // await store.dispatch('actiononline')
        ElMessage.success('登录成功')
        const redirect = router.currentRoute.value.query.redirect as string
        router.push(redirect || { name: '主页' })
    } catch (e: any) {
        ElMessage.error(String(e))
    }
}

// 忘记密码发送验证码
async function clickForgetCode() {
    if (forgetTime.value !== 60) return
    if (!isPhonenum.test(forget.phonenum)) {
        ElMessage.error('请输入正确的手机号')
        return
    }
    await asyncgetregistphoneVerificationCode(forget.phonenum)
    const timer = setInterval(() => {
        forgetTime.value--
        if (forgetTime.value === 0) {
            clearInterval(timer)
            forgetTime.value = 60
        }
    }, 1000)
}

// 忘记密码提交
async function forgetpassword() {
    const { phonenum, password, yzm } = forget
    if (!phonenum || !password || !yzm) {
        ElMessage.error('请填写完整信息')
        return
    }
    try {
        await asyncresetpassword(forget)
        ElMessage.success('密码修改成功，请登录')
        form.phonenum = phonenum
        form.password = password
        name.value = '登录'
    } catch (e: any) {
        ElMessage.error(String(e))
    }
}

// 注册发送验证码
async function clickRegisterCode() {
    if (registerTime.value !== 60) return
    if (!isPhonenum.test(register.phonenum)) {
        ElMessage.error('请输入正确的手机号')
        return
    }
    await asyncgetregistphoneVerificationCode(register.phonenum)
    const timer = setInterval(() => {
        registerTime.value--
        if (registerTime.value === 0) {
            clearInterval(timer)
            registerTime.value = 60
        }
    }, 1000)
}

// 注册提交
async function registersubmit() {
    const { phonenum, password, yzm, name: username } = register
    if (!phonenum || !password || !yzm || !username) {
        ElMessage.error('请填写完整信息')
        return
    }
    try {
        await asyncuserregist(register)
        ElMessage.success('注册成功，请登录')
        form.phonenum = phonenum
        form.password = password
        name.value = '登录'
    } catch (e: any) {
        ElMessage.error(String(e))
    }
}

// 背景特效
function jp() {
    if (JPdom.value) {
        jpdata.value = new JParticles.Particle(JPdom.value, {
            color: "#fff",
            proximity: 90,
            range: 100,
            num: 0.1,
            maxR: 2.4,
            minR: 0.6,
            maxSpeed: 0.8,
            minSpeed: 0.1,
        })
    }
}
onMounted(() => {
    jp()
})
onUnmounted(() => {
    jpdata.value?.onDestroy()
    jpdata.value = undefined
})

</script>

<style scoped>
.login-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #74ebd5 0%, #acb6e5 100%);
    z-index: 0;
}

.login-box {
    width: 90%;
    max-width: 400px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    padding: 32px 24px;
    z-index: 1;
}

.form-container {
    display: flex;
    flex-direction: column;
}

.form-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 24px;
}

.input-group {
    margin-bottom: 16px;
}

.input-group input {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.captcha-group {
    display: flex;
    gap: 8px;
}

.captcha-group input {
    flex: 1;
}

.btn-captcha {
    padding: 0 16px;
    background: #409eff;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.btn-captcha.disabled {
    background: #ccc;
    cursor: not-allowed;
}

.button-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.btn-text-group {
    display: flex;
    justify-content: space-between;
}

.btn-primary {
    padding: 12px;
    background: #409eff;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}

.btn-text {
    padding: 12px;
    background: transparent;
    color: #409eff;
    border: none;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
}

.btn-register {
    border: 1px solid #409eff;
    margin: 0;
}

.not-found {
    color: #ff4d4f;
    font-size: 24px;
    font-weight: bold;
}

@media (max-width: 480px) {
    .login-box {
        padding: 24px 16px;
    }

    .form-title {
        font-size: 20px;
    }
}
</style>